<template>
  <div class="manager clearfix">
    <div class="fl leftArea">
      <div class="dataArea" >
     <!--   <div class="accontTop">
          <div class="accontInfo">
            <div class="head_img">
              <img src="~@/assets/images/common/head.png" alt="头像" />
            </div>
            <div class="area">
              <div class="areaName">{{accountInfo.areaName}}</div>
              <div class="timeArea">
                <p class="last">上次登录时间:</p>
                <p class="time">{{accountInfo.upLoginTime}}</p>
              </div>
            </div>
          </div>
          <div class="data_show">
            <div class="data_item">
              <div class="data_img">
                <img src="~@/assets/images/common/mobile.png" alt />
              </div>
              <div class="data_p">
                <p class="data_title">移动用户</p>
                <p class="data_per">{{accountInfo.ydCompleteYearAimNet}}%</p>
              </div>
            </div>
            <div class="data_item">
              <div class="data_img">
                <img src="~@/assets/images/common/wifi.png" alt />
              </div>
              <div class="data_p">
                <p class="data_title">宽带用户</p>
                <p class="data_per">{{accountInfo.kdCompleteYearAimNet}}%</p>
              </div>
            </div>
            <div class="data_item">
              <div class="data_img">
                <img src="~@/assets/images/common/book.png" alt />
              </div>
              <div class="data_p">
                <p class="data_title">天翼高清</p>
                <p class="data_per">{{accountInfo.tyCompleteYearAimNet}}%</p>
              </div>
            </div>
          </div>
          <p class="tip">注：三大主营业务净增完成率</p>
        </div>
        <div class="index_type">
          <div class="index_item">
            <p class="index_title">主营业务收入累计完成</p>
            <p class="index_num">
              <span class="num">{{accountInfo.thisYearLjIncome}}</span>
              <span class="unit">亿元</span>
            </p>
            <p class="index_month">{{accountInfo.monthStr}}</p>
          </div>
          <div class="line"></div>
          <div class="index_item">
            <p class="index_title">主营业务收入增长</p>
            <p class="index_num">
              <span class="num">{{accountInfo.tbYearIncreaseRate}}</span>
              <span class="unit">%</span>
            </p>
            <p class="index_month">{{accountInfo.monthStr}}</p>
          </div>
          <div class="line"></div>
          <div class="index_item">
            <p class="index_title">年度收入预算完成率</p>
            <p class="index_num">
              <span class="num">{{accountInfo.completeYearBudget}}</span>
              <span class="unit">%</span>
            </p>
            <p class="index_month">{{accountInfo.monthStr}}</p>
          </div>
          <div class="line"></div>
          <div class="index_item">
            <p class="index_title">收入累计预算缺口</p>
            <p class="index_num">
              <span class="num">{{accountInfo.gapOfBudgetLj}}</span>
              <span class="unit">万元</span>
            </p>
            <p class="index_month">{{accountInfo.monthStr}}</p>
          </div>
        </div>
 -->
        <div class="accontLeft">
           <div class="accMonth">截至{{acctMonth}}</div>
           <div class="accontInfo">

             <div class="head_img">
               <img src="~@/assets/images/common/shouru.png" />
             </div>
             <div class="area">

               <div class="areaName">主营收入</div>
               <p class="areaNumber" >{{mainOperationIncome.mainIncome}}<span class="areaUnit">万元</span></p>
             </div>
           </div>
           <div class="progress-Bar">
             <div class="progressBarTitle">
               <span class="successRate">完成率 {{mainOperationIncome.mainIncomeCompleteRate+'%'}}</span>
              <el-progress :percentage="mainOperationIncome.mainIncomeCompleteRate" color="#ffffff" :show-text="false"></el-progress>
              <span class="falseTitle"  ><span class="falseRate">{{mainOperationIncome.mainIncomeGapOfBudget}}<span class="falseUnit">万元</span></span></span></div>
           </div>
        </div>
        <div class="accontRight">
          <div class="rightFlex">
           <div class="accontInfo">
             <div class="head_img">
               <img src="~@/assets/images/common/book.png" alt />
             </div>
             <div class="area">
               <div class="areaName">基本面收入</div>
               <p class="areaNumber">{{mainOperationIncome.basicIncome}}<span class="areaUnit">万元</span></p>
             </div>
           </div>
           <div class="progress-Bar">
              <el-progress :percentage="mainOperationIncome.basicIncomeCompleteRate" color="#3d89e5" ></el-progress>
           </div>
          </div>
        <div class="rightFlex">
       <div class="accontInfo">
         <div class="head_img">
           <img src="~@/assets/images/common/book.png" alt />
         </div>
         <div class="area">
           <div class="areaName">码号级收入</div>
           <p class="areaNumber">{{mainOperationIncome.numberIncome}}<span class="areaUnit">万元</span></p>
         </div>
       </div>
       <div class="progress-Bar">
          <el-progress :percentage="mainOperationIncome.numberIncomeCompleteRate" color="#d81e06" ></el-progress>
       </div>
      </div>
      <div class="rightFlex">
       <div class="accontInfo">
         <div class="head_img">
            <img src="~@/assets/images/common/book.png" alt />
         </div>
         <div class="area">
           <div class="areaName">DICT收入</div>
           <p class="areaNumber">{{mainOperationIncome.dictIncome}}<span class="areaUnit">万元</span></p>
         </div>
       </div>
       <div class="progress-Bar">
          <el-progress :percentage="mainOperationIncome.dictIncomeCompleteRate" color="#F56C6C" ></el-progress>
       </div>
      </div>
      <!-- <div class="bottom">其中：智云护航<span class="number">80</span>万元</div> -->
        </div>

     </div>
     <div class="daiban">
        <div class="contentTopTitle">
          <div class="fl">
            <div class="title">{{businessTitle}}</div>
          </div>
        </div>
        <div class="db_content" >
         <el-carousel arrow="hover" indicator-position="none" :autoplay="false" height="100%"  ref="carousel" @change="onCarouselChange">
            <el-carousel-item >
              <div class="carouselContent" id="db_content">
                 <div class="db_item" >
                    <span class="db_img clearfix">
                      <div class="pieTitle">
                         <p class="dbTitle">移动净增</p>
                         <p class="dbNumber">{{mainDev.mobileValue}}  <span class="desc">万户</span></p>
                       </div>
                       <div class="pieHeight">
                         <el-progress :percentage="mainDev.mobileCompleteRate" color="#3d89e5" type="circle" :width="70"></el-progress>
<!--                         <businessPie1 :percentNum="mainDev.mobileCompleteRate"></businessPie1> -->
                       </div>
                    </span>
                  </div>
                  <div class="db_item" >
                    <span class="db_img clearfix">
                      <div class="pieTitle">
                         <p class="dbTitle">宽带净增</p>
                         <p class="dbNumber">{{mainDev.broadHandValue}} <span class="desc">万户</span></p>
                       </div>
                       <div class="pieHeight">
                         <el-progress :percentage="mainDev.broadHandCompleteRate" color="#3d89e5" type="circle" :width="70"></el-progress>
                       </div>
                    </span>
                  </div>
                 <div class="db_item db_item3">
                  <span class="db_img clearfix">
                   <div class="pieTitle">
                      <p class="dbTitle">5G用户净增</p>
                      <p class="dbNumber">{{mainDev.fiveGValue}} <span class="desc">万户</span></p>
                    </div>
                    <div class="pieHeight">
                      <el-progress :percentage="mainDev.fiveGCompleteRate" color="#3d89e5" type="circle" :width="70"></el-progress>
                    </div>
                 </span>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item >
              <div class="carouselContent carouselContent1">
                 <div class="db_item db_item1" >
                   <span class="db_img clearfix">
                      <div class="pieTitle">
                         <p class="dbTitle">全屋WIFI</p>
                         <p class="dbNumber">{{mainDev.wifiValue}} <span class="desc">万户</span></p>
                       </div>
                       <div class="pieHeight1">
                         <el-progress :percentage="mainDev.wifiCompleteRate" color="#3d89e5" type="circle" :width="60"></el-progress>
                       </div>
                    </span>
                  </div>
                  <div class="db_item db_item1" >
                    <span class="db_img clearfix">
                      <div class="pieTitle">
                         <p class="dbTitle">天翼看家</p>
                         <p class="dbNumber">{{mainDev.tianyiValue}} <span class="desc">万户</span></p>
                       </div>
                       <div class="pieHeight1">
                         <el-progress :percentage="mainDev.tianyiCompleteRate" color="#3d89e5" type="circle" :width="60"></el-progress>
                       </div>
                    </span>
                  </div>
                 <div class="db_item db_item1">
                  <span class="db_img clearfix">
                   <div class="pieTitle">
                      <p class="dbTitle">优品包</p>
                      <p class="dbNumber">{{mainDev.contentPackageValue}} <span class="desc">万户</span></p>
                    </div>
                    <div class="pieHeight1">
                      <el-progress :percentage="mainDev.contentPackageCompleteRate" color="#3d89e5" type="circle" :width="60"></el-progress>
                    </div>
                 </span>
                </div>
                <div class="db_item db_item1">
                 <span class="db_img clearfix">
                   <div class="pieTitle">
                      <p class="dbTitle">融合套餐</p>
                      <p class="dbNumber">{{mainDev.fuseValue}} <span class="desc">万户</span></p>
                    </div>
                    <div class="pieHeight1">
                      <el-progress :percentage="mainDev.fuseCompleteRate" color="#3d89e5" type="circle" :width="60"></el-progress>
                    </div>
                 </span>
                </div>
              </div>
            </el-carousel-item>
         </el-carousel>
        </div>
      </div>
    </div>
    <div class="fl rightArea">
      <div class="message">
        <div class="rect">
          <img src="~@/assets/images/common/email.png" alt />
          <div class="box">
            <ul id="con1" ref="con1" :class="{anim:animate==true}">
              <li v-for="(item,index) in messageList" :key="index" :title="item.name">{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="carousel">
        <el-carousel height="24vh">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="~@/assets/images/common/banner.png" alt @click="$router.push({path:'/budget/notice'})"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="message_info">
        <div class="db_list">
          <p class="db_item" v-for="(item,index) in 10" :key="index" @click="$router.push({path:'/budget/notice'})">【公告】2020年全省经营预算指引指导意见</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import businessPie1 from "./managerView/businessPie1";
import lineComponent2 from "./echarts/lineTime";
import {$budgetAPI} from "@/api";
import {getCookie} from "@/common/js/cookie"
export default {
  name: "manager",
  components: {
    businessPie1,

  },
  data() {
    return {
      messageList: [
        { name: "【待审核】上城区-关于2020年杭州市预算编制XXXXXXXXXXXXXX" },
        { name: "【待审核】下城区-关于2020年杭州市预算编制XXXXX" },
        { name: "【待审核】萧山区-关于2020年杭州市预算编制XXXXX" }
      ],
      animate: false,
      accountInfo:{},
      businessTitle:'主量发展',
      count:0,
      progressNum:60,
      mainBusinessIncome:{},
      mainOperationIncome:{
        dictIncomeCompleteRate:0,
        mainIncomeCompleteRate:0,
        basicIncomeCompleteRate:0,
        numberIncomeCompleteRate:0,
      },
      mainDev:[],
      acctMonth:'',
    };
  },

  created(){
      setInterval(this.scroll, 3000);
      this.getMainOperationIncomeData();
  },
  mounted(){
    this.getData();

  },
  methods: {
    //获取主营数据接口
    getMainOperationIncomeData(){
      let token = getCookie('token')
      $budgetAPI.getMainOperationIncomeData(
        {token:token},
        res => {
          if (res.code == 0) {
             this.mainOperationIncome = res.content.mainBusinessIncome;
             this.mainDev = res.content.mainDev;
             this.acctMonth = res.content.acctMonth.substring(0,4)+'年'+ (res.content.acctMonth.substring(4,5)>0?res.content.acctMonth.substring(4,5):'')+ res.content.acctMonth.substring(5,6)+'月';
             this.$emit('acctMonthData',this.acctMonth)
             if(this.mainDev.mobileCompleteRate<0){
                this.mainDev.mobileCompleteRate=0
             }
             if(this.mainDev.broadHandCompleteRate<0){
                this.mainDev.broadHandCompleteRate=0
             }
             if(this.mainDev.fiveGCompleteRate<0){
                this.mainDev.fiveGCompleteRate=0
             }
             if(this.mainDev.wifiCompleteRate<0){
                this.mainDev.wifiCompleteRate=0
             }
             if(this.mainDev.tianyiCompleteRate<0){
                this.mainDev.tianyiCompleteRate=0
             }
             if(this.mainDev.contentPackageCompleteRate<0){
                this.mainDev.contentPackageCompleteRate=0
             }
             if(this.mainDev.fuseCompleteRate<0){
                this.mainDev.fuseCompleteRate=0
             }
             if(res.content.mainBusinessIncome.mainIncomeGapOfBudget>0){
                 this.mainOperationIncome.mainIncomeGapOfBudget ='超额' + res.content.mainBusinessIncome.mainIncomeGapOfBudget
             }else{
               this.mainOperationIncome.mainIncomeGapOfBudget ='缺口' + res.content.mainBusinessIncome.mainIncomeGapOfBudget
             }
          } else {
            console.log(res);
            // this.alertError(res);
          }
        },
        err => {}
      );
    },
    // getMainOperationIncomeData(){
    //   $budgetAPI.getMainOperationIncomeData({},res=>{
    //     if(res.code == 0){
    //       this.accountInfo = res.content;

    //     }else{
    //       this.alertError(res);
    //     }
    //   },err=>{

    //   })
    // },
    //获取指标的数据
    getData(){
      $budgetAPI.getData({},res=>{
        if(res.code == 0){
          this.accountInfo = res.content;
        }else{
          this.alertError(res);
        }
      },err=>{

      })
    },
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.messageList.push(this.messageList[0]); // 将数组的第一个元素添加到数组
        this.messageList.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    onCarouselChange (index) {
      this.count = index
      if(this.count == 0){
        this.businessTitle='主量发展'
      }else if(this.count == 1){
        this.businessTitle='重点业务发展'
      }
      }
  }
};
</script>

<style lang="scss" scoped>
.manager {
  width: 100%;
  height: 58vh;
  .leftArea {
    width: 66%;
    margin-right: 1%;
    .dataArea {
      width: 100%;
      height: 25vh;
      margin-bottom: 1vh;
      // border: 1px solid #dee5f3;
      border-radius: 3px;
      background-color: #ffffff;
      .accontLeft{
        background-color: #3d89e5;
        height: 100%;
        width: 30%;
        color:#ffffff;
        padding:15px 10px;
        position: relative;
        float:left;
        .accMonth{
          margin-bottom: 10px;
              font-size: 14px;
        }
        .accontInfo {
          display: flex;
          .head_img {
            margin-right: 15px;
          }
          .area {
            .areaName {
              margin: 5px 0;
              font-size: 14px;

            }
           .areaNumber{
                font-size: 18px;
                font-weight: 700;
                .areaUnit{
                   font-size: 14px;
                }
           }
          }
        }
        .progress-Bar{
          position: absolute;
          bottom:20px;
          width: calc(100% - 30px);
         .progressBarTitle{
           margin-bottom: 5px;
           font-size: 13px;
           position: relative;
           .falseTitle{
             position: absolute;
               right: 0;
               width: 100%;
               text-align: right;
             .falseRate{
               // color:red;
               .falseUnit{
                 color:#fff
               }
            }
           }

          }
          /deep/ .el-progress-bar{
            margin-top: 5px;
              .el-progress-bar__outer{
               background-color: #cccccc;

             }
           }
        }

      }
      .accontRight{
           float: right;
           height: 100%;
            width: 69%;
            border: 1px solid #dee5f3;
            display: flex;
            margin-left: 5px;

            position: relative;
            .rightFlex{
              flex:1;
              padding:30px 10px;
               position: relative;
              .accontInfo {
                margin-bottom: 15px;
                position: relative;
                .head_img {
                  // margin-right: 15px;
                  display: inline-block;
                }
                .area {
                  display: inline-block;
                  position: absolute;
                  right: 0;
                  .areaName {
                    margin: 5px 0;
                    font-size: 14px;

                  }
                 .areaNumber{
                      font-size: 20px;
                      font-weight: 700;
                      .areaUnit{
                         font-size: 14px;
                      }
                 }
                }
              }
            .progress-Bar{
              position: absolute;
              right:0px;
              width: calc(100% - 30px);

             .progressBarTitle{
               margin-bottom: 5px;
               font-size: 13px;
               position: relative;
               .falseTitle{
                 position: absolute;
                 .falseRate{
                   color:red;
                   .falseUnit{
                     color:#fff
                   }
            }
           }

          }
          /deep/ .el-progress-bar{
            width: 90%;
            margin-top: 5px;
              .el-progress-bar__outer{
               background-color: #cccccc;

             }
           }
        }
            }
            .bottom{
              position: absolute;
              bottom: 10px;
              right: 10px;
              background-color: #ccc;
              padding: 0px 8px;
              border-radius: 50px;
              font-size: 14px;
              .number{
                font-size: 18px;
                font-weight: 700;
              }
            }

      }

   //    .accontTop {
   //      display: flex;
   //      justify-content: space-between;
   //      align-items: center;
   //      height: 50%;
   //      border-bottom: 1px solid #dee5f3;
   //      position: relative;
   //      .tip{
   //        position: absolute;
   //        bottom: 10px;
   //        right: 20px;
   //      }
   //      .accontInfo {
   //        margin-left: 20px;
   //        display: flex;
   //        .head_img {
   //          margin-right: 15px;
   //        }
   //        .area {
   //          .areaName {
   //            margin: 5px 0;
   //            font-size: 22px;
   //            font-weight: bold;
   //          }
   //          .timeArea {
   //            .last {
   //              color: #666666;
   //            }
   //            .time {
   //              color: #999999;
   //            }
   //          }
   //        }
   //      }
   //      .data_show {
   //        width: 60%;
   //        display: flex;
   //        justify-content: space-around;
   //        align-items: center;
   //        .data_item {
   //          display: flex;
   //          width: 120px;
   //          justify-content: space-between;
   //          align-items: center;
   //          color: #666666;
   //          .data_title {
   //            font-size: 12px;
   //          }
   //          .data_per {
   //            font-size: 18px;
   //            font-weight: 500;
   //          }
   //        }
   //      }
   //    }
   //    .index_type {
   //      padding: 0 50px;
   //      height: 50%;
   //      display: flex;
   //      justify-content: space-between;
   //      align-items: center;
   //      .line {
   //        border-left: 1px solid #dee5f3;
   //        height: 65px;
   //      }
   //      .index_item {
   //        .index_title {
   //          font-size: 12px;
   //          color: #666666;
   //          margin-bottom: 5px;
   //        }
   //        .index_num {
   //          color: #418ee9;
   //          margin-bottom: 5px;
   //          .num {
   //            font-size: 24px;
   //            display: inline;
   //            margin-right: 10px;
   //          }
   //          .unit {
   //            font-size: 14px;
   //          }
   //        }
   //        .index_month {
   //          color: #ffffff;
   //          font-size: 13px;
   //          line-height: 20px;
   //          height: 20px;
   //          border-radius: 20px;
   //          width: 65px;
   //          text-align: center;
   //          padding: 0 10px;
   //          overflow: hidden;
   //          background-color: #00b7ee;
   //        }
   //      }
   //    }

    }

    .daiban {
      width: 100%;
      height:32vh;
      border: 1px solid #dee5f3;
      border-radius: 3px;
      background-color: #ffffff;
      .contentTopTitle {
        padding-left: 15px;
        margin: 0 !important;
        border-bottom: 1px solid #dee5f3;
        .title {
          font-size: 14px;
        }
      }
      .db_content {
        justify-content: space-around;
        align-items: center;
        height: calc(32vh - 48px);
         padding:30px 10px;
      // .db_item:hover{
      //   background-color: #eee;
      //   padding: 10px;
      // }
      .el-carousel{
        height: 100%;
       /deep/ .el-carousel__arrow--left {
            left: 0px;
            height: 25px;
            width: 25px;
        }
        /deep/ .el-carousel__arrow--right {
            right: 0px;
            height: 25px;
            width: 25px;
        }
      }
      .carouselContent{
          display: flex;
          height: 100%;

        .db_item.db_item1{
             padding: 0 10px;
        }
       .db_item{
        flex:1;
        padding: 0 20px;
        height: 100%;
        border-right: 1px solid #dee5f3;
        text-align:center;
        position: relative;
        .db_img{
          width: 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          .db_img.clearfix:after,.db_img.clearfix:before{
            content: "";
            display: table;
          }
          .db_img.clearfix:after,.db_img.clearfix:before{
            clear: both;
          }
          .db_img.clearfix{
            *zoom: 1;
          }
         .pieTitle{
            display:inline-block;
            height: 100%;
            margin-right:15px;
            vertical-align:middle;
            .dbTitle{
               font-size: 14px;
               color: #333333;
               margin-right: 15px;
               margin-bottom: 20px;
               font-weight: normal;
            }
            .dbNumber{
               font-size: 20px;
               color: #333333;
               .desc{
                 font-size: 14px;
                 color: #333333;
               }
               // font-weight: normal;
            }
          }
         .pieHeight{
            display:inline-block;
            height: 70px;
            width: 70px;
            margin-top: 5px;
            vertical-align:middle;
         }
         .pieHeight1{
            display:inline-block;
            height: 60px;
            width: 60px;
            vertical-align:middle;
         }
        }
        p{
          width:100% ;
          text-align: center;
          color:#333333;
          font-size: 14px;
          font-weight: bold;
          margin-top: 5px;
        }
      }

      .db_item.db_item3{
        border-right:none;
        padding-right: 30px;
      }
      // .db_item:nth-child(1){
      //   padding-left: 30px;
      // }
      .db_item:nth-child(4){
         border-right:none;
         padding-right: 30px;
      }

      }

      }
    }
  }
  .rightArea {
    width: 32%;
    height: 100%;
    border: 1px solid #dee5f3;
    border-radius: 3px;
    background-color: #ffffff;
    .message {
      width: 100%;
      padding: 10px;
      .rect {
        padding: 10px;
        height: 48px;
        line-height: 48px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background-color: #fcf5f3;
        border: solid 1px #fee2da;
        .box {
          line-height: 16px;
          height: 16px;
          overflow: hidden;
          width: 100%;
          #con1 {
            width: 100%;
            li {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }
          }
        }
        .anim {
          transition: all 1s;
          -moz-transition: all 1s; /* Firefox 4 */
          -webkit-transition: 1s; /* Safari 和 Chrome */
          -o-transition: all 1s;
          margin-top: -16px;
          // transform: translate(0,-16px);
        }
      }
    }
    .carousel {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .message_info {
      padding:10px;
      height: 22vh;
      .db_list {
        height: 100%;
        margin-top: 5px;
        overflow-y: scroll;
        .db_item {
          cursor: pointer;
          padding-left: 15px;
          padding-bottom: 5px;
          margin-top: 5px;
          font-size: 14px;
          color: #333333;
          border-bottom: 1px solid #dfe1e4;
        }
      }
    }
  }
}
</style>
